import React, { Component } from 'react';
import {Block, View, Input} from '@tarojs/components';
import './screen.scss';

interface IProps {
  options: object
  onChange: Function
}

export default class MyHeader extends Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }

  inputChange(e, key) {
    const {value} = e.detail;
    this.props.onChange(value, key);
  }

  tagChange(value, key, index) {
    this.props.onChange(value, key, index);
  }
  render() {
    const props: any = this.props;
    let {options} = props;
    if (typeof (options) == "undefined" || null == options) {
      options = [];
    }
    return (
      <Block>
        {
          options && options.map((item, index) => {
            return (
              <View className='screen' key={index}>
                <View className='screen-title'>
                  {item.title}
                </View>
                <View className={`screen-content ${(item.type == 'tag' || item.type == 'tag1') ? 'm-b-20' : ''}`}>
                  {
                    (item.type == 'tag' || item.type == 'tag1') && item.data.map(items =>
                      <View
                        className={`atag ${item.active == items.value? 'active': ''}`}
                        onClick={() => this.tagChange(items.value, item.key, index)}
                        key={item.id}
                        style={`${item.active == items.value? `background-color: ${process.env.mainColor};`: ''}`}
                      >
                        {items.label}
                      </View>
                    )
                  }
                  {
                    item.type == 'input' &&
                      <Input
                        className='ainput'
                        placeholder={item.placeholder}
                        type={`${item.isNumber?'number': 'text'}`}
                        onInput={(e) => {
                          this.inputChange(e, item.key)
                        }}
                      />
                  }
                </View>
              </View>
            )
          })
        }
      </Block>
    )
  }
}
